<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            
            var canvas;
            var ctx;
            var food;
            var snake;
            var score = 0;
            var player;
            var canvas_w;
            var canvas_h;
            var cell_width = 10;
            var game_loop;
            var keyboard = {
                TOP:38,
                RIGHT:39,
                LEFT:37,
                BOTTOM:40,
                current_pressed:"right"
            };
            var speed_level = 0;
            
            window.onkeydown = function(event){
                switch(event.keyCode){
                    case keyboard.TOP :
                        keyboard.current_pressed = "top";                        
                        break;
                    case keyboard.BOTTOM:
                        keyboard.current_pressed = "bottom";                        
                        break;
                    case keyboard.RIGHT:
                        keyboard.current_pressed = "right";                         
                        break;
                    case keyboard.LEFT:
                        keyboard.current_pressed = "left";                        
                        break;
                }
            }
            function start_game(){
                clearInterval(game_loop);
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                canvas_w = canvas.width;
                canvas_h = canvas.height;                 
                canvas.focus();
                document.getElementById("start").style.display = 'none';
                document.getElementById("stop").style.display = 'block';
                init();
            }
            function stop(){
                clearInterval(game_loop);
                document.getElementById("start").style.display = 'block';
                document.getElementById("stop").style.display = 'none';
            }
            
            function build_snake(){                 
                for(var i = snake.length-1; i>=0; i--){                        
                    snake.position.push({x:i,y:0});
                }
            }
            
            function build_food(){
                food = {
                    point:10,
                    pos_x:Math.round(Math.random()*(canvas_w-cell_width)/cell_width),
                    pos_y:Math.round(Math.random()*(canvas_h-cell_width)/cell_width),
                    speed:50
                }
            }
            
            function init(){ 
                snake = {
                    position:[],
                    length:5                    
                };
                score = {
                    high_score:0,
                    score:0
                }
                build_snake();
                build_food();                  
                if(typeof game_loop != "undefined") clearInterval(game_loop);
                game_loop = setInterval(paint,food.speed)
                
            }    
            
            function paint(){        
                
                ctx.fillStyle = "white";
                ctx.fillRect(0, 0, canvas_w, canvas_h);
                ctx.strokeStyle = "black";
                ctx.strokeRect(0, 0, canvas_w, canvas_h);
                
                var snake_x = snake.position[0].x;
                var snake_y = snake.position[0].y;
                
                if(keyboard.current_pressed == "right"){                                       
                    snake_x++;
                   
                } 
                else if(keyboard.current_pressed == "left"){                                        
                    snake_x--;                              
                }
                else if(keyboard.current_pressed == "top") snake_y--;
                else if(keyboard.current_pressed == "bottom") snake_y++;
                
                if(snake_x == -1 || snake_x == canvas_w/cell_width || snake_y == -1 || snake_y == canvas_h/cell_width)
                {
                    //restart game
                    alert("Game Over !");
                    start_game();
                    //Lets organize the code a bit now.
                    return;
                }
                
                if(snake_x == food.pos_x && snake_y == food.pos_y)
                {                    
                    var tail = {x:snake_x, y:snake_y};
                    score.score += 1;
                    //Create new food
                    speed_level += 50
                    build_food();
                }
                else
                {
                    var tail = snake.position.pop(); //pops out the last cell
                    tail.x = snake_x; tail.y = snake_y;
                }
                snake.position.unshift(tail)
                
                //dire nako gi buhat ang sna
                for(var i = 0; i < snake.position.length; i++)
                {
                    var c = snake.position[i];                                          
                    paint_cell(c.x, c.y);
                }		                
                //dire nako gi buhat ang food
                paint_cell(food.pos_x, food.pos_y);
                var score_board = "Score: " + score.score;
                ctx.fillText(score_board, 5, canvas_h-5);                               
            }
            function paint_cell(x,y,array){
                ctx.fillStyle = "blue";
                ctx.fillRect(x*cell_width, y*cell_width, cell_width, cell_width);
                ctx.strokeStyle = "white";
                ctx.strokeRect(x*cell_width, y*cell_width, cell_width, cell_width);
            }
                       
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <canvas id="canvas" width="500" height="500" style="border: 1px solid black;">

                    </canvas>
                </td>
                <td>
                    <button id="start" onclick="start_game()">Start</button>
                    <button id="stop" onclick="stop()" style="display: none;">Stop</button>
                </td>
            </tr>
        </table>

    </body>
</html>
